<template>
  <div class="blockContent" v-loading="dialogloading">
    <table width="980px" class="userTable" cellspacing="0" cellpadding="5" height="450px">
      <tbody>
      <tr valign="top">
        <td class="userTableTd" min-width="220px;">
          <table class="userTableTdTable">
            <tbody>
            <tr>
              <td width="80%" valign="middle"><input id="nodeName" v-model="inputtext"></td>
              <td width="20%" valign="middle"><input id="nodeLocation" type="button"></td>
            </tr>
            </tbody>
          </table>
          <bpm-c-tree style="min-width: 220px; height: 340px;"
                      :treeJson="treeJson"
                      :filterText="inputtext"
                      v-model="selectItem"/>
        </td>
        <td bgcolor="#fdfdfd" style="padding:10px;">
          <div class="queryuser">
            <div class="queryborder">
              <table align="center">
                <tbody>
                <tr>
                  <td><span id="orgFullName">{{otherI18n.searchTitle}}</span></td>
                  <td>
                    <input
                      id="keywords"
                      style="margin-right: 10px;"
                      type="text"
                      @keyup.enter="queryKeywordsUserList"
                      v-model="nameSearchKey">
                  </td>
                  <td>
                    <input style="margin-left: 20px;" type="button" id="keywords_search" :value="otherI18n.query" @click="queryKeywordsUserList">
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div id="middleTd" style="margin-top:10px;">
            <table cellspacing="0" cellpadding="0" width="100%" class="querytable">
              <thead>
              <tr class="querytableTr">
                <td width="5%"><input style="display:none" onclick="checkAll(this);" id="checkAll" type="checkbox"></td>
                <td width="10%">ID</td>
                <td width="15%">{{otherI18n.name}}</td>
                <td width="45%">{{otherI18n.department}}</td>
                <td width="10%">{{otherI18n.employeeNo}}</td>
              </tr>
              </thead>
              <tbody id="dataTable" class="MMTab">
              <tr style="height:18px;" v-for="(val,i) in choiceArray" :key="i">
                <td v-if="!multSelect">
                  <input name="userCheck" v-model="selectValue" class="userCheck" type="radio" :value="val">
                </td>
                <td v-else>
                  <input name="userCheck" v-model="checkArray" class="userCheck" type="checkbox" :value="val">
                </td>
                <td><font color="red">{{val.uid}}</font></td>
                <td>{{val.cn}}</td>
                <td>{{val.displayname}}</td>
                <td>{{val.employeenumber}}</td>
              </tr>
              </tbody>
              <tfoot>
              <tr>
                <td colspan="5" style="height:27px;">
                  <div class="singleDivBg">
                    <table style="margin: 0 auto;">
                      <tbody>
                      <tr>
                        <td><span style="cursor: default;font-size:13px; margin-right: 5px;">Total:
                          <span style="margin-right: 15px;" id="resultCount">{{userMax}}</span>
                          <a href="#" @click="firstPage">
                            <img width="18" height="18" :title="otherI18n.firstPage" :alt="otherI18n.firstPage"
                                 src="/static/images/ecsbpm/page/index3.gif"
                                 style="border: 0">
                          </a>
                          <a href="#" @click="prevPage">
                            <img width="18" height="18" :title="otherI18n.prevPage" :alt="otherI18n.prevPage"
                                 src="/static/images/ecsbpm/page/pre3.gif" style="border: 0">
                          </a>
                          <a href="#" @click="nextPage">
                            <img width="18" height="18" :title="otherI18n.nextPage" :alt="otherI18n.nextPage"
                                 src="/static/images/ecsbpm/page/next3.gif"
                                 style="border: 0">
                          </a>
                          <a href="#" @click="lastPage">
                            <img width="18" height="18" :title="otherI18n.lastPage" :alt="otherI18n.lastPage"
                                 src="/static/images/ecsbpm/page/last3.gif"
                                 style="border: 0"></a>
                          <span style="cursor: default;font-size:13px;margin-left: 20px;">
                            <span>{{choicePageNumber+1}}</span>/<span id="pageCount">{{choicePageMax}}</span>page
                          </span>
                        </span>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </td>
              </tr>
              </tfoot>
            </table>
          </div>
        </td>
        <td colspan="2" id="userList" width="50%">
          <div class="usertitle">{{otherI18n.chosens}}</div>
          <div style="padding:10px;">
            <!--<input style="display:none;" id="selectedUser" class="" onkeydown="selecLocate()">-->
            <select id="selectedUserList" multiple="multiple" v-model="chooseSelect">
              <option v-for="(val,i) in selectArray" :key="i" :value="i">{{val.cn}}({{val.uid}})</option>
            </select>
            <br>
            <div class="groupBtnRihgt"><input class="groupBtn" type="button" @click="delete_" :value="otherI18n.remove"></div>
            <div class="groupBtnRihgt"><input class="groupBtn" type="button" @click="deleteAll" :value="otherI18n.removeAll"></div>
          </div>
        </td>
      </tr>
      <tr class="userBottom">
        <td height="33" colspan="4">
          <center>
            <input type="button" id="DF_00005" :value="otherI18n.sureBig" @click="btnClick(1)">
            <input style="margin-left: 20px;" type="button" id="DF_00006" :value="otherI18n.cancelBig" @click="btnClick(2)">
          </center>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
var DATATREE = require('../../../../js/ldap_treedata.js')
import {mapState, mapActions} from 'vuex'

export default {
  name: 'bpmDPersonchoose',
  props: {
    pselectType: {
      type: String,
      default: ''
    },
    multSelect: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      nameSearchKey: '', // 人名搜索
      selectItem: {}, // 选中部门
      selectArray: [],
      checkArray: [],
      selectValue: '',
      inputtext: '', // 部门关键字搜索
      choicePageCount: 12,
      // 当前页码
      choicePageNumber: 0,
      chooseSelect: [],
      ldapLoading: false
    }
  },
  computed: {
    ...mapState(['ldap', 'otherI18n']),
    dialogloading () {
      return this.ldapLoading || (this.$store.state.dialogloading !== 0)
    },
    treeJson: {
      get () {
        return this.ldap.departmentData
      },
      set (value) {
        this.$store.commit('setLdapTree', value)
      }
    },
    treeArray () {
      return this.ldap.departmentArray
    },
    userMax () {
      console.log(this.ldap.userArray)
      if (this.ldap.userArray && this.ldap.userArray.length) { return this.ldap.userArray.length }
      return 0
    },
    choicePageMax () {
      return parseInt(this.userMax / this.choicePageCount) + 1
    },
    choiceArray () {
      console.log('.......choiceUserArray', this.ldap.userArray)
      console.log('0000000->', this.choicePageNumber, this.choicePageCount)
      return this.ldap.userArray.slice(this.choicePageNumber * this.choicePageCount, this.choicePageNumber * this.choicePageCount + this.choicePageCount)
    }
  },
  watch: {
    selectValue (to) {
      console.log(to)
      if (!this.multSelect) {
        if (to) {
          this.selectArray = [to]
        } else {
          this.selectArray = []
        }
      }
    },
    choiceArray (to) {
      // 复原选择
      this.checkArray = []
      this.selectValue = ''
    },
    selectArray (to) {
      this.chooseSelect = []
    },
    selectItem (to) {
      console.log('tree node selected:', to)
      if (to && to !== {}) {
        console.log('--------------set name search key---------------------')
        this.ldapLoading = true
        setTimeout(() => {
          this.queryUserListByOrgId({me: this, inOrgUid: to.id})
          this.ldapLoading = false
        }, 100)
      }
    },
    checkArray (to) {
      console.log(to)
      if (this.multSelect) {
        // 1.删除selectArray中存在在choiceArray的数据
        let cacheArray = {}
        for (let i in this.choiceArray) {
          cacheArray[this.choiceArray[i]['uid']] = true
        }
        let cacheData = []
        for (let j in this.selectArray) {
          if (!cacheArray[this.selectArray[j]['uid']]) {
            cacheData.push(this.selectArray[j])
          }
        }
        // 2.合并selectArray和checkArray
        this.selectArray = cacheData.concat(to)
      }
    },
    treeArray (to) {
      let toclown = to.concat()
      this.treeJson = [DATATREE.makeTreeJsonByData(DATATREE.initTreeArray(toclown))]
    }
  },
  created () {
    // 异步获取数据操作
    if (!this.treeArray || this.treeArray.length <= 0) {
      console.log('load all orgs........')
      this.ldapLoading = true
      setTimeout(() => {
        this.loadAllOrgs({me: this, async: true})
        this.ldapLoading = false
      }, 100)
    }
  },
  methods: {
    ...mapActions(['loadAllOrgs', 'queryUserListByOrgId', 'queryUserListByKeyword']),
    btnClick (aIndex) {
      if (aIndex === 2) {
        this.$emit('closeClicked')
      } else {
        this.$emit('selectClicked', this.selectArray.length > 0 ? this.selectArray : [])
      }
      // 清空选择
      this.checkArray = []
      this.selectValue = ''
      this.selectArray = []
    },
    delete_ () {
      if (!this.chooseSelect || this.chooseSelect.length !== 1) {
        return
      }
      this.selectArray.splice(this.chooseSelect[0], 1)
    },
    deleteAll () {
      this.selectArray.splice(0, this.selectArray.length)
    },
    queryKeywordsUserList () {
      // console.log('query....', this.nameSearchKey)
      if (!this.nameSearchKey || this.nameSearchKey.length <= 0) { return }
      this.queryUserListByKeyword({me: this, inKeywords: this.nameSearchKey})
    },
    firstPage () {
      console.log('first')
      this.choicePageNumber = 0
    },
    prevPage () {
      console.log('prev')
      if (this.choicePageNumber > 0) {
        this.choicePageNumber -= 1
      }
    },
    nextPage () {
      console.log('next')
      if (this.choicePageNumber < this.choicePageMax - 1) {
        this.choicePageNumber += 1
      }
    },
    lastPage () {
      console.log('last')
      this.choicePageNumber = this.choicePageMax - 1
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .blockContent {
    width: 980px;
    height: 450px;
  }

  .userTable {
    border-top: 1px solid #b9b9b9;
    border-left: 1px solid #b9b9b9;
    border-right: 1px solid #b9b9b9;
  }

  #nodeName {
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    width: 100%;
    border-bottom: 1PX solid #e2e3ea;
    border-left: 1PX solid #e2e3ea;
    border-right: 1PX solid #e2e3ea;
    border-top: 1px solid #abadb3;
  }

  #nodeLocation {
    background: url(/static/images/rootGroup_06.jpg) no-repeat center top;
    width: 15px;
    height: 16px;
    border: none;
  }

  #prev {
    background: url(/static/images/rootGroup_09.jpg) no-repeat center top;
    width: 15px;
    height: 13px;
    border: none;
  }

  #next {
    background: url(/static/images/rootGroup_11.jpg) no-repeat center top;
    width: 15px;
    height: 13px;
    border: none;
  }

  .userTableTd {
    background: url(/static/images/rootGroup_29.jpg) repeat-y right top;
    background-color: #eff3f6;
    padding: 0px;
    width: 140px;
  }

  .userTableTdTable {
    background: url(/static/images/rootGroup_25.jpg) repeat-x center top;
    height: 33px;
    width: 99%;
  }

  .queryuser {
    border: 1px solid #cbcbcb;
    background-color: #FFF;
  }

  .queryborder {
    border: 5px solid #f8f8f8;
    margin: 1px;
    background-color: #fefefe;
    padding: 1px;
    font-size: 12px;
    color: #3e4858;
  }

  #keywords {
    height: 20px;
    line-height: 20px;
    width: 300px;
    font-size: 12px;
  }

  #keywords_search {
    background: url(/static/images/rootGroup_40.jpg) no-repeat center top;
    width: 80px;
    height: 27px;
    border: none;
    color: #3a3a3a;
    margin-right: 10px;
  }

  .querytable {
    font-size: 15px;
    overflow: scroll;
    text-align: center;
    border: 1px solid #b9b9b9;
  }

  .querytableTr {
    height: 32px;
    font-weight: bold;
    background: url(/static/images/title.jpg) repeat-x center top;
    color: #3e4858;
  }

  .MMTab {
    color: #5e6267;
    font-size: 12px;
    background: url(/static/images/userlist.jpg) repeat center top;
    table-layout: fixed;
  }

  .singleDivBg {
    background: url(/static/images/feny.jpg) repeat-x 0 0;
    color: #24386B;
    height: 27px;
  }

  #userList {
    background: url(/static/images/rootGroup_21.jpg) repeat-y left top;
    background-color: #eff3f6;
    padding: 0px;
    margin: 0px;
    width: 20%;
  }

  .usertitle {
    background: url(/static/images/rootGroup_03.jpg) no-repeat left center;
    height: 28px;
    font-size: 12px;
    font-weight: bolder;
    line-height: 28px;
    padding-left: 10px;
    color: #3e4858;
  }

  #selectedUserList {
    border: 1px solid #CCCCCC;
    height: 250px;
    margin-top: 10px;
    width: 100%;
  }

  .groupBtnRihgt {
    background: url(/static/images/rootGroup.jpg) no-repeat left top;
    margin-top: 6px;
    padding-left: 2px;
    margin-right: 8px;
    float: left;
  }

  .groupBtn {
    background: url(/static/images/rootGroup_33.jpg) no-repeat right top;
    padding-left: 4px;
    padding-right: 4px;
    height: 20px;
    text-align: center;
    border: none;
    color: #3a3a3a;
    line-height: 20px;
  }

  .userBottom {
    background: url(/static/images/rootGroup_37.jpg) repeat-x center top;
    height: 46px;
  }

  #DF_00005 {
    background: url(/static/images/rootGroup_43.jpg) no-repeat center top;
    color: #ffffff;
    width: 53px;
    height: 27px;
    border: none;
    margin-left: 10px;
  }

  #DF_00006 {
    background: url(/static/images/rootGroup_40.jpg) no-repeat center top;
    width: 55px;
    height: 27px;
    border: none;
    color: #3a3a3a;
    margin-right: 10px;
  }

  #dataTable tr {
    line-height: 32px;
    overflow: hidden;
    height: 32px;
  }

  #dataTable td {
    border-right: 1px solid #dfdfdf;
  }

  .MMTab td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0px;
    height: 25px;
  }
</style>
